<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<title>图片剪切</title>
</head>
<script src="/Public/Js/jquery-1.7.2.min.js"></script>

<script>
		 $(function(){
	    var type=$(window.parent.document).find(".aui_title").html();
		if(type=='自由上传'){
 			$("#type").val(null);
 			}
		else if(type=='上传大图'){
 			$("#type").val(1.7);
 			}
			else{ $("#type").val(1)}
			 
		});

</script>

<body style=" margin:0px !important">
<div>

  <style>
 .leftimg{ background:#FFF; float:left; position:absolute; top:48%; left:0;padding:3px; border:1px solid #d5d5d5; border-radius:3px; margin-left:8px;}
 .rightimg{ float:right; background:#FFF; position:absolute; top:48%; right:0; padding:3px; border:1px solid #d5d5d5; border-radius:3px; margin-right:8px; }
 </style>
<button class="leftimg">左旋转</button>
<button class="rightimg">右旋转</button>
    

</div>

<script>
var url="{:U('Member/Index/upload_Img')}";
 
$(function(){
	
	
	
	$(".leftimg").click(
	function(){
	var img_urlo=$("input[name='img_url']").val();
	if(img_urlo ==''){alert("请选择图片再做旋转"); return false;}	
	
 		$.post(
		url,
		{imgo:'left',imgo_url:img_urlo},
		function(a){ uploaded(a); },
		'json'
  		);
 		}
 	);
	
	$(".rightimg").click(
 	function(){
		var img_urlo=$("input[name='img_url']").val();
		if(img_urlo ==''){alert("请选择图片再做旋转"); return false;}	
 		$.post(
		url,
		{imgo:'right',imgo_url:img_urlo},
		function(a){ uploaded(a); },
		'json'
  		);
 		}
 	);
	
	});







</script>


<input type="hidden" id="type" />
<div class="main" style="width:204px;">
<script type="text/javascript" src="__PUBLIC__/Js/jquery.Jcrop.min.js"></script>
<link rel="stylesheet" type="text/css" href="__PUBLIC__/css/jquery.Jcrop.min.css" media="all">
  <style>
  body{background:#fff;}
	.header{display:none;}
	.w790{margin-top:0px;}
	.imgcatecontrol li{float:left;}
	.imgcatecontrol li a{display:block; padding:18px 12px;}
	.imgcatecontrol li a.cur{color:#f60; font-weight:bold; font-size:16px;}
	.optionControl{border-bottom:1px solid #000;}
	.optionControl li{float:left; border:1px solid #000; margin:0px 2px; position:relative; bottom:-1px; padding:8px;}
	.optionControl li.cur{border-bottom:1px solid #fff; }
</style>
  <script>
  
    
   
  
  
	function selectImg(cur){
		$('.imgList a').removeAttr('id');
		$(cur).attr('id','Imgselected');
	}
	
	
	
	//预览图
		function showPreview(coords){
			var img_width = $('#cropbox').width();
			var img_height = $('#cropbox').height();
			  //根据包裹的容器宽高,设置被除数
			  var rx = 100 / coords.w;
			  var ry = 100 / coords.h; 
			  $('#crop-preview-100').css({
			    width: Math.round(rx * img_width) + 'px',
			    height: Math.round(ry * img_height) + 'px',
			    marginLeft: '-' + Math.round(rx * coords.x) + 'px',
			    marginTop: '-' + Math.round(ry * coords.y) + 'px'
			  });
			  rx = 60 / coords.w;
			  ry = 60 / coords.h;
			  $('#crop-preview-60').css({
			    width: Math.round(rx * img_width) + 'px',
			    height: Math.round(ry * img_height) + 'px',
			    marginLeft: '-' + Math.round(rx * coords.x) + 'px',
			    marginTop: '-' + Math.round(ry * coords.y) + 'px'
			  });
		}
	
	function uploaded(path,aspectRatio__){
		 
		$('#status_').html('正在加载图片，请稍等！');
		$("#img_url").attr("src",path);
		$("input[name='img_url']").val(path);
		$("#img_url").parent('a').attr('img_url',path);
		$('.imgList a').removeAttr('id');
		$("#img_url").parent('a').attr('id','Imgselected');
		
		
		
		//重置
		$('#preview-hidden').find('*').remove();
					$('#preview-hidden').hide().addClass('hidden').css({'padding-top':0,'padding-left':0});
		
		

				var preview = $('.upload-area').children('#preview-hidden');
				preview.show().removeClass('hidden');
				//两个预览窗口赋值
				$('.crop').children('img').attr('src',path+'?random='+Math.random());
				//隐藏表单赋值
				$('#img_src').val(path);
				//绑定需要裁剪的图片
				var img = $('<img />');
				preview.append(img);
				preview.children('img').attr('src',path+'?random='+Math.random());
				var crop_img = preview.children('img');
				crop_img.attr('id',"cropbox").show();
				var img = new Image();
				img.src = path+'?random='+Math.random();
				//根据图片大小在画布里居中
				img.onload = function(){
					$('#status_').html('请选择剪切区域');
					var img_height = 0;
					var img_width = 0;
					var real_height = img.height;
					var real_width = img.width;
					if(real_height > real_width && real_height > 200){
						var persent = real_height / 200;
						real_height = 200;
						real_width = real_width / persent;
					}else if(real_width > real_height && real_width > 200){
						var persent = real_width / 200;
						real_width = 200;
						real_height = real_height / persent;
					}
					if(real_height < 200){
						img_height = (200 - real_height)/2;	
					}
					if(real_width < 200){
						img_width = (200 - real_width)/2;
					}
					preview.css({width:(200-img_width)+'px',height:(200-img_height)+'px'});
					preview.css({paddingTop:img_height+'px',paddingLeft:img_width+'px'});			
				}
		
				
				//裁剪插件
				$('#cropbox').Jcrop({
		            bgColor:'#333',   //选区背景色
		            bgFade:true,      //选区背景渐显
		            fadeTime:1000,    //背景渐显时间
		            allowSelect:false, //是否可以选区，
		            allowResize:true, //是否可以调整选区大小
					
					
		            aspectRatio: $("#type").val(),     //约束比例
					
					
					
		            minSize : [100,100],//可选最小大小
		            boxWidth : 200,		//画布宽度
		            boxHeight : 200,	//画布高度
		            onChange: showPreview,//改变时重置预览图
		            onSelect: showPreview,//选择时重置预览图
		            setSelect:[ 0, 0, 300, 300],//初始化时位置
		            onSelect: function (c){	//选择时动态赋值，该值是最终传给程序的参数！
						 
			            $('#x').val(c.x);//需裁剪的左上角X轴坐标
			            $('#y').val(c.y);//需裁剪的左上角Y轴坐标
			            $('#w').val(c.w);//需裁剪的宽度
			            $('#h').val(c.h);//需裁剪的高度
		          }
		        });
				
				
		     
		
		
	}
	
	
	
	
</script>
  <div class="fr w790">


    <!--操作区2-->
  
    <div class="optionBox" style="display:;">
  <div class="imgList">
  
  
  
  <input name="img_url" type="hidden" value="" />
  
  
  <iframe width="100%" height="40" scrolling="no" marginheight="0" marginwidth="0" style=" padding:0; margin:0" frameborder="0" src="{:U('upload_Img',array('id' => $id))}"></iframe>
  <span id="status_" style="text-align:center; display:block"></span>
  
  </div>
  
   
  
  
	<div class="upload-area">
		
		<div class="preview hidden" id="preview-hidden"></div>
	</div>
	<div class="preview-area">
     

		<input type="hidden" id="x" name="x" />
		<input type="hidden" id="y" name="y" />
		<input type="hidden" id="w" name="w" />
		<input type="hidden" id="h" name="h" /> 
		<input type="hidden" id='img_src' name='src'/> 

	</div>


<style type="text/css">
.main{
	margin: 0 auto;
	padding: 15px;
	width: 200px; 
	font-family: "microsoft yahei"; 
	background-color: #F5F5F5;
}
.cf:before,.cf:after {
	display: table;
	content: "";
	line-height: 0;
}
.cf:after {
	clear: both;
}
.cf {
	*zoom: 1;
}
.upload-area {
	position: relative;
	float: left;
	margin-right: 30px;
	width: 200px;
	height: 200px;
	background-color: #F5F5F5;
    border: 2px solid #E1E1E1;
}
.upload-area .file-tips {
	position: absolute;
	top: 90px;
	left: 0;
    padding: 0 15px;
    width: 170px;
    line-height: 1.4;
    font-size: 12px;
	color: #A8A8A3;
    text-align: center;
}
.userup-icon {
    display: inline-block;
    margin-right: 3px;
    width: 16px;
    height: 16px;
    vertical-align: -2px;
	background: url("__ROOT__/public/img/userup_icon.png") no-repeat;
}
.uploadify-button {
	line-height: 120px!important;
	text-align: center;
}
.preview-area {
	float: left;
}
.tcrop {
    clear: right;
    font-size: 14px;
    font-weight: bold;
}
.update-pic .crop {
    background: url("__ROOT__/public/img/mystery.png") no-repeat scroll center center #EEEEEE;
    float: left;
    margin-bottom: 20px;
    margin-top: 10px;
    overflow: hidden;
}
.crop100 {
    height: 100px;
    width: 100px;
}
.crop60 {
    height: 60px;
    margin-left: 20px;
    width: 60px;
}
.update-pic .save-pic {
    clear: left;
    margin-right: 20px;
}
.update-pic .uppic-btn {
    background-color: #348FD4;
    color: #FFFFFF;
    display: block;
    float: left;
    font-size: 16px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    vertical-align: middle;
    width: 89px;
}
.preview {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 11;
	width: 200px;
	height: 200px;
	overflow: hidden;
	background:#fff;
	display: none;
}
</style>
  </div>
  <!--区2结束-->
  </div>
  <div class="clear"></div>
</div>


</body></html>
